<template>
    <div class="modal fade" id="resetPwd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          	<div class="modal-header">
            	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            	<h4 class="modal-title reset-title" id="myModalLabel">验证码正确，请设置新密码</h4>
          	</div>
          	<div class="modal-body">
          	 	<div class="form-horizontal">
	                <div class="form-group">
	                  <label for="" class="col-sm-4 control-label">新密码<label style="color: red;">*</label>：</label>
	                  <div class="col-sm-8">
	                    <input type="password" class="form-control" v-model="newPassword" placeholder="请输入新密码">
	                  </div>
	                </div>
	                <div class="form-group">
	                  <label for="" class="col-sm-4 control-label">确认密码<label style="color: red;">*</label>：</label>
	                  <div class="col-sm-8">
	                    <input type="password" class="form-control" v-model="cofirmPassword" placeholder="请输入新密码">
	                  </div>
	                </div>
	              </div>
          	</div>
                <div style="text-align: center;margin-top: 1px;" >
                <p style="font-size:15px;color:#ff8b22">
                <span>密码为长度8-20位的数字、字母、</span>
                <span>下划线或常用字符</span>
                </p>
            </div>
          	<div class="modal-footer">
            	<!--<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
            	<button type="button" class="btn checkedBtn" v-bind:disabled="saveUserBtnShow" @click="updatePwd()">确定</button>
          	</div>
        </div>
      </div>
    </div>
</template>
<style>
.reset-title{
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}
.reset-footer{
    margin-top: 20px;
}
</style>

<script>
	export default{
        //接收父组件的绑定值
        props: {
            phoneModal: {
                type: String,
                default: '',
            }
        },
		data() {
			return {
				newPassword:'',
				cofirmPassword:'',
				userId:window.localStorage.getItem("4_userId"),
				saveUserBtnShow: false
			}
		},
		mounted: function() {
		},
		methods: {
			updatePwd() {
				var _self = this;
				//执行新增或修改
				if(_self.userValidate()){
					_self.saveUserBtnShow = true;
			   		var body = {};
					body.params = {
						phone:_self.phoneModal,
						newPassword:_self.newPassword,
						confirmPassword:_self.cofirmPassword
					}
					var url = this.utilHelper.apiUrl+'/api/resetPwdByForget';
			   	 	_self.$http.post(url, body).then((response) => {
							var data = response.body.resData;
							console.log(data);
				   			var result = data.result;
				   			var resData = data.resultMsg;
				   			if("1" == result){
				   				//输出操作信息
				   			layer.alert('密码修改成功，请重新登录',  function(){
								//关闭弹出层
								layer.closeAll();
								_self.$router.push({path:"/login"});
							});   	
				   			}else{
				   				_self.saveUserBtnShow = false;
				   				layer.msg(data.resultMsg);
				   			}
										
				  		}, (response) => {
				  	});
			   		
				}
			},
			userValidate() {
				var phone = this.phoneModal;
				var newPassword = this.newPassword;
				var cofirmPassword = this.cofirmPassword;
				if(!phone){
					layer.msg("该账号异常，请刷新后重试",{
						time: 2000
					});
					return false;
				}
				if(!newPassword){
					layer.msg("新密码不能为空",{
						time: 2000
					});
					return false;
				}
				if(newPassword){
					var reg = /^[a-zA-Z0-9~!@#$%^&*()-_+=`{}\[\]:;"'<>?,.\/\\]{8,20}$/;
					if(!reg.test(newPassword)){
						layer.msg("密码为长度8-20位的数字、字母、下划线或常用字符(`~!@#$%^&*()-_+={}[]:;\"'<>?,.\/)",{
							time: 3000
						});
						return false;
					}
				}
				if(!cofirmPassword){
					layer.msg("请确认密码",{
						time: 2000
					});
					return false;
				}
				if(newPassword != cofirmPassword){
					layer.msg("两次密码输入不一致",{
						time: 2000
					});
					return false;
				}
				return true;
			}
		}
	}
	
</script>